<template>
  <div class="home_map_install">
    <div class="wrapper-title">
      <BaseTitle title="快速上手" />
    </div>

    <div class="wrapper-content">
      <div class="npm-content">
        <h2>安装依赖</h2>
        <h3>通过 <span class="Default">npm</span> 或 <span class="Default">cnpm</span> 安装插件所需依赖，目前暂不支持通过 JS 引入的方式</h3>
        <code class="code">
          <div>
            npm
            <span class="code-orange">install</span>
            axios coordtransform iview echarts -S
          </div>
          <div class="comment">
            // 由于ol已经更新到 openlayers5 ，而ol4和ol5之间存在较大的差别，所以安装时，指定安装ol4</div>
          <div>
            npm
            <span class="code-orange">install</span>
            ol@4.6.2 -S
          </div>
          <div class="comment">
            // 整个插件使用 scss 预编译器，如果没有安装 node-sass sass-loader，则需要安装</div>
          <div>
            npm
            <span class="code-orange">install</span>
            node-sass sass-loader -D
          </div>
        </code>
      </div>

      <div class="import-content">
        <h2>引入</h2>
        <h3>通过引入文件夹 <span class="Default">Gykj_map</span> ，进行使用</h3>
        <code class="code">
          <div class="comment">// 在你需要使用地图插件的vue文件下使用，需要更改路径为你放置文件夹的路径</div>
          <div>
            <span class="code-orange">import</span>
            Gykj_map
            <span class="code-orange">from</span>
            <span class="code-green">'src/base/Gykj_map'</span>
          </div>
          <div class="comment">// 也可以通过ES6的解构赋值，直接去拿想要的方法</div>
          <div>
            <span class="code-orange">import</span>
            { Maps }
            <span class="code-orange">from</span>
            <span class="code-green">'src/base/Gykj_map'</span>
          </div>
        </code>
      </div>

      <div class="api-Gykj_map">
        <h2>API</h2>
        <h3>
          <Table
            border
            size="small"
            :columns="apis.gykjMapThead"
            :data="apis.gykjMapTbody"></Table>
        </h3>
      </div>

    </div>
  </div>
</template>

<script>
import * as apis from './api/install'

export default {
  created () {
    this.apis = apis
  },
  data () {
    return {

    }
  }
}
</script>

<style lang="scss" scoped>
  .home_map_install {
    width: 100%;
    height: 100%;
    padding: 10px;
    overflow: auto;
  }
</style>
